<?php 
	include '../init.php';
	
	$row=get_config('banner');
	$jsbanner=json_decode($row,true);

?>
<!DOCTYPE html>
<html>
<head>
	<title>首页图片</title>
	
	<link rel="stylesheet" type="text/css" href="<?php echo __PUBLIC__;?>/bootsrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="<?php echo __PUBLIC__;?>/webupload/webuploader.css">
	<script type="text/javascript" src="<?php echo __PUBLIC__;?>/js/jquery.js"></script>
	<script type="text/javascript" src="<?php echo __PUBLIC__;?>/bootsrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="<?php echo __PUBLIC__;?>/validate/jquery.validate.min.js"></script>
	<script type="text/javascript" src="<?php echo __PUBLIC__;?>/validate/localization/messages_zh.min.js"></script>
	<script type="text/javascript" src="<?php echo __PUBLIC__;?>/webupload/webuploader.js"></script>
	<style type="text/css">
	</style>
</head>
<body background="../../public/img/bg4.jpg">
	<div>&nbsp;</div>
	<div>&nbsp;</div>
	<div class="container bg-info">
		<div class="col-md-12">&nbsp;</div>
		<div class="col-md-12">&nbsp;</div>
		<div class="row">
			<?php include '../nav.php'; ?>
		</div>
	</div>
	<div class="container text-center bg-info">
		<div class="row">

			<div class="col-md-12">&nbsp;</div>
			<div class="col-md-12">&nbsp;</div>
			<div class="col-md-12">&nbsp;</div>
			
			<div class="col-md-12">
				<div class="col-md-2" style="padding-left: 20px;font-size: 18px;height: 25px;line-height: 25px;color: black;"><span class="glyphicon glyphicon-th-list"></span>  幻灯片设置</div>
					<div class="col-md-12">&nbsp;</div>
					<div class="form-group">
						<div class="row">
							<div id="picker" class="col-md-2">上&nbsp;&nbsp;&nbsp;&nbsp;传</div>
						</div>
						<input type="hidden" id="sitelogo" name="sitelogo" placeholder="网站LOGO">
					</div>
			</div>
			<form action="bannersave.php" method="post" id="articleForm" class="form-horizontal">
				<div class="col-md-12">&nbsp;</div>
				<table class="table">
					<thead>
						<tr>
							<th class="text-center">图片</th>
							<th class="text-center">标题</th>
							<th class="text-center">链接</th>
							<th class="text-center">操作</th>
						</tr>
					</thead>
					<tbody id="picBox">
						<?php if ($jsbanner) { ?>
							<?php foreach ($jsbanner as $key => $value) { ?>
								<tr id="lineh">
									<td><img src="<?php echo __PUBLIC__; ?>/upload/<?php echo $value['banner']; ?>" style="width: 100px;height: 100px;"><input type="hidden" name="banner[]" value="<?php echo $value['banner']; ?>"></td>
									<td><input type="text" name="title[]" value="<?php echo $value['title']; ?>"></td>
									<td><input type="text" name="link[]" value="<?php echo $value['link']; ?>"></td>
									<td><a href="#" class="delbtn btn btn-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>　删除</a></td>
								</tr>
							<?php } ?>
						<?php } ?>
					</tbody>
				</table>
				<div class="col-md-12">&nbsp;</div>
				<div class="form-group">
			        	<div class="col-md-12">
			        		<div class="col-md-3"></div>
			        		<button class="btn btn-success col-md-1 text-right">保存</button>
							<div class="col-md-4"></div>
							<a href="index.php" class="btn btn-success col-md-1 text-right ">返回</a>
			        	</div>
				</div>
			</form>
			<!-- 提示弹窗 -->
			<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
			    <div class="modal-dialog modal-sm" role="document">
			      <div class="modal-content">

			        <div class="modal-header">
			          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
			          <h4 class="modal-title" id="mySmallModalLabel"><span class="glyphicon glyphicon-info-sign text-warning" aria-hidden="true"></span>提 示 框</h4>
			        </div>
			        <div class="modal-body">
			          ...
			        </div>
			      </div>
			    </div>
			</div>
			
			<!-- 表单验证 -->
			<script type="text/javascript">
				$('#articleForm').validate({
				  	submitHandler: function(form) {
				    	$.ajax({
							type:'post',
							url:$('#articleForm').attr('action'),
							data:$('#articleForm').serialize(),
							dataType:'json',
							success:function(data){
								if(data.code=='000'){
									// window.location="banner.php";
									$('#myModal .modal-body').html(data.msg);
									$('#myModal').modal({'show':true});
									$('#myModal').modal({'hide':true});
								}else{
									$('#myModal .modal-body').html(data.msg);
									$('#myModal').modal({'show':true});
								}
							}
						});
				  	}
				});
			</script>
			<!-- 绑定删除按钮 -->
			<script type="text/javascript">
						$('#picBox').on('click','.delbtn',function(){
							$(this).parent().parent().remove();
							return false;
						});
			</script>
			<!-- 引入上传文件工具 -->
				<script type="text/javascript">
					var uploader = WebUploader.create({
						// 选完文件后，是否自动上传。
			    		auto: true,
					    // swf文件路径
					    swf: '<?php echo __PUBLIC__;?>/webupload/Uploader.swf',
					    // 文件接收服务端。
					    server: '<?php echo $config['local'];?>/lib/upfile.php',
					    // 选择文件的按钮。可选。
					    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
					    pick: '#picker',
					    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
					    resize: false,

					    runtimeOrder:false,
					    //允许重复上传
					    duplicate:true,
					    // 只允许选择图片文件。
					    accept: {
					        title: 'Images',
					        extensions: 'gif,jpg,jpeg,bmp,png',
					        mimeTypes: 'image/jpg,image/jpeg,image/png',
					    }
					});
					//添加到上传队列事件
					uploader.on( 'fileQueued', function( file ) {
			            
					});
					//上传成功事件
				    uploader.on( 'uploadSuccess', function(file,response) {
				    	if(response._raw!='000'){
				    		// $('#sitelogo').val(response._raw);
				    		var $tr = $(
					            '<tr><td class="text-center" id="' + file.id + '">' +
					                '<img>' +
					                '<input id="' + file.id + 'img" type="hidden" name="banner[]" value="' +response._raw+ '"></td><td class="text-center"><input type="text" name="title[]"></td><td class="text-center"><input type="text" name="link[]"></td><td><a href="#" class="delbtn">删除</a></td>' +
					            '</tr>'
					            ),
					        	$img = $tr.find('img');
					        	$('#picBox').append( $tr );
					        	uploader.makeThumb( file, function( error, src ) {
							        if ( error ) {
							            $img.replaceWith('<span>不能预览</span>');
							            return;
							        }

							        $img.attr( 'src', src );
							    }, 100, 100 );
				    	}
					    
					});
					//上传失败事件
					uploader.on( 'uploadError', function( file ) {
					    var $li = $( '#'+file.id ),
					        $error = $li.find('div.error');

					    // 避免重复创建
					    if ( !$error.length ) {
					        $error = $('<div class="error"></div>').appendTo( $li );
					    }

					    $error.text('上传失败');
					});
				</script>
		</div>
	</div>
	<div>&nbsp;</div>
</body>
</html>